<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>Title</title>
    <!--基本资源库-->
    <script src="../js/lib/jquery.js"></script>
    <script src="../js/lib/jquery-ui.min.js"></script>
    <script src="../js/lib/jquery.fullPage.js"></script>
    <!--H5对象资源&管理内容：页-组件-->
    <script src="../js/H5.js"></script>
    <link rel="stylesheet" href="../css/H5.css">

    <script src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" href="../css/H5ComponentBase.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<script>
    $(function () {
        var h5 = new H5();

        h5.addPage('face')
                .addComponent('logo',{
                    text:'logo',
                    width:400,
                    height:100,
                    css:{backgroundColor:'red',top:200,opacity:0},
                    center:true,
                    animateIn:{opacity:1},
                    animateOut:{opacity:0},
                })
                .addComponent('slogn',{
                    text:'slogn',
                    width:400,
                    height:100,
                    css:{backgroundColor:'yellow',top:350,opacity:0},
                    center:true,
                    animateIn:{opacity:1},
                    animateOut:{opacity:0},
                })
            .addPage('desc')
                .addComponent('caption',{
                    text:'核心理念',
                    width:400,
                    height:100,
                    css:{backgroundColor:'skyblue',top:300},
                    center:true,
                    animateIn:{opacity:1},
                    animateOut:{opacity:0},
                })
            .addPage('page-3')
                .addComponent('caption',{
                    text:'asdasdas',
                    width:400,
                    height:100,
                    css:{backgroundColor:'deeppink',top:300},
                    center:true,
                    animateIn:{opacity:1},
                    animateOut:{opacity:0},
                })
            .loader();
    })
</script>
</body>
</html>